<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { onMounted } from 'vue'
import LabMap from '../../components/LabMap.vue'
import { ClassType,ADMIN, APPROVE, REJECT } from '../../util/type'
import { useUserStore } from '../../store/useUserStore'
// 引入日期格式化插件
import moment from 'moment'
import { computed } from 'vue'
const {user}=useUserStore()
onMounted(()=>{
  getList()
})

const tableData = ref([])

const getList = async () => {
  let res
    // 获取用户信息 判断是管理员还是教师
    // console.log(user.role.roleName)
    if(user.role.roleType===ADMIN){
    res = await axios.get('/adminapi/books?book_state=0')
    }else{
     res = await axios.get(`/adminapi/books?book_username=${user.username}`)
    // console.log(tableData.value)
    // ElMessage.success('获取成功')
    }
    tableData.value = res.data

 
}


// 预览
const currentItem = ref({})
const dialogVisible = ref(false)
const handleLocation=(item)=>{
  dialogVisible.value=true
  currentItem.value=item.lab
  console.log(currentItem.value)
}


// 批准
const handleApproved=async ({id},state)=>{
  // console.log(item)

 await axios.put(`/adminapi/books/${id}`,{
  book_state:state,
 })
  // 提示消息删除成功
  // console.log(res)
  ElMessage.success('批准成功')
  // 重新渲染
  getList()
}

//驳回
const handleReject=async ({id},state)=>{
  // console.log(item)
 await axios.put(`/adminapi/books/${id}`,{
  book_state:state
 })
  // 提示消息删除成功
  // console.log(res)
  ElMessage.success('驳回成功')
  // 重新渲染
  getList()
}


const class_method=(value)=>{
 const res= ClassType.find(item=>item.value===value)
return res.label
}

// 搜索
const search=ref('')
const filterTableData= computed(()=>{
  return tableData.value.filter(item=>
  !search.value ||
  item.book_username.toLowerCase().includes(search.value.toLowerCase())
  )
})
</script>

<template>
  <div>
    <el-table  stripe :data="filterTableData" style="width: 100%">

    <el-table-column label="名称">
      <template #default="scope">
        <el-link type="primary" @click="handleLocation(scope.row)">{{ scope.row.lab.title }}</el-link>
      </template>
    </el-table-column>

    <el-table-column label="用户" v-if="user.role.roleType===ADMIN">
      <template #header>
        <el-input v-model="search" size="small" placeholder="请搜索" />
      </template>
      <template #default="scope">
        <div >{{ scope.row.book_username }}</div>
      </template>
    </el-table-column>

    <el-table-column label="预约时间">
      <template #default="scope">
        <el-tag     
        style="width: 80px;color: skyblue;height: 40px;"
        effect="dark"
        type="primary"
        size="large"
        >{{  moment(scope.row.book_time).format('YYYY-MM-DD') }}
      <br>
      <span  style="margin-top: 5px;display: block;color: yellowgreen;">  {{ class_method(scope.row.book_class) }}</span>
    </el-tag>
 
      </template>
    </el-table-column>

    <el-table-column label="预约状态" >
      <template #default="scope">
        <el-tag  v-if="scope.row.book_state===0"
        style="width: 70px;color: pink;"
        effect="dark"
        round
        type="success"
        size="large"
        >审核中</el-tag>
        <el-tag  v-if="scope.row.book_state===1"
        style="width: 70px;color: red;"
          effect="dark"
        round
        type="waring"
        size="large"
        >已批准</el-tag>
        <el-tag  v-if="scope.row.book_state===2"
        style="width: 70px;color: darkblue;"
          effect="dark"
        round
        type="error"
        size="large"
        >被驳回</el-tag>
      </template>
    </el-table-column>


    

    <el-table-column label="操作" v-if="user.role.roleType===ADMIN">
      <template #default="scope">
        <el-popconfirm title="你确定要批准吗？?"
         @confirm="handleApproved(scope.row,APPROVE)"
         confirm-button-text="确定"
          cancel-button-text="取消"
          confirm-button-type="warning"
          cancel-button-type="info"
         >
          <template #reference>
      <el-button  size="large"  round type="primary"  >批准</el-button>
    </template>
  </el-popconfirm>
        <el-popconfirm title="你确定要驳回吗？?"
         @confirm="handleReject(scope.row,REJECT)"
         confirm-button-text="确定"
          cancel-button-text="取消"
          confirm-button-type="warning"
          cancel-button-type="info"
         >
          <template #reference>
      <el-button  size="large"  round type="danger"  >驳回</el-button>
    </template>
  </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>
  </div>
  <el-dialog
  v-if="dialogVisible"
  :fullscreen="true"
    v-model="dialogVisible"
    title="实验室位置"
    align-center
  >
<div><LabMap :x="currentItem.x" :y="currentItem.y" :t="currentItem.title"></LabMap></div>
   
  </el-dialog>


</template>

<style scoped>
.el-tag
{
  --el-tag-text-color:white;
}
</style>
